<template>
    <div>
        <div>
            响应式
        </div>
        <el-button @click="proxyFn()">
            proxy点击更改
        </el-button>
        <el-button @click='clickBtn'>
            defineProperty点击更改
        </el-button>
        <!-- <ruby>
            前端开发核心知识进阶
         <rt>qianduankaifahexinzhishijinjie</rt>
        </ruby> -->
     <!-- <details>
        <summary>前端开发核心知识进阶</summary>
        前端领域，入门相对简单，可是想要「更上一层楼」却难上加难，也就是我们常说的「职业天花板较低」，
        君不见——市场上高级/资深前端工程师凤毛麟角。这当然未必完全是坏事，一旦突破瓶颈，在技能上脱颖而出，
        便是更广阔的空间。那么，如何从夯实基础到突破瓶颈？
    </details>
        <a href="tel: 13892537953">打电话给李金龙</a>
        <a href="sms: 110">发短信给警察局</a>
        <a href="mailto: 1799420645@qq.com">发邮件给李金龙</a>
        <a href="mailto: 110@govn.com; 120@govn.com">
            发邮件给警察局以及 120 急救
        </a> -->
    </div>
</template>
<script>
export default {
    data(){
        return {
            datas : {
            name:'李金龙',
            age:'123',
            uesrInfo:{
                title:'我是好人',
                text:'不 不对'
            }
        },
            text:1,
            arr:[1,2,3,4,5,6],

        }
    },
    
    mounted(){
        this.definePropertys(this.datas)
    },
    methods:{
        definePropertys (data,text){
          if (!data || typeof data !== 'object')  return 
            Object.keys(data).forEach(item=>{
                let value =  data[item]
                //递归加响应
                this.definePropertys(value)
                Object.defineProperty(data,item,{
                    enumerable: true,
                    configurable: false,
                    get(){
                        console.log('获取',data,item)
                        return value
                    },
                    set(newValue){
                        value = newValue
                        console.log('设置',newValue,text)
                    }
                })
            })
        },
        clickBtn(arr){
            console.log(this.datas.uesrInfo.title = '21321')
        },
        proxyFn(){
            let arr1 = [1,2,3]
            let obj = {
                name:'李xx',
                age:22,
                height:1.70
            }
            let handle = {
                get(target,key,receiver){
                    console.log('获取get', target,key,receiver)
                    return Reflect.get(target,key,receiver)
                },
                set(target,key,value,receiver){
                    console.log('设置set',target,key,value,receiver)
                    return Reflect.set(target,key,value,receiver)
                }
            }
            let proxy = new Proxy(obj,handle)
            // proxy.push(5)
            console.log(proxy.name)
            proxy.name = '王xx'
            console.log(obj)
        }
    }
}
</script>
<style>
:root {
    --block:block;
}
 a{
    display: var(--block);
 }
</style>
